#include("../layout.html")
#set(PATH='/core/dictionary')
#@layout()

#define css()
<link href="#(CTX)/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
#end

#define js()
<!-- Bootstrap table -->
<script src="#(CTX)/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="#(CTX)/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="#(CTX)/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- jquery.form -->
<script src="#(CTX)/js/plugins/form/jquery.form.min.js"></script>

<script>
    <!-- 编辑新增对话框js,如有需要请导出到对应的对话框js文件中 -->
    var dictDialog = function(){
        var modal = $('#dictDialog');
        var saveUrl = _CTX_ + _PATH_ + '/save';
        var form = modal.find("form");
        var _callback;

        var btnSave = modal.find("#btnSave");

        btnSave.click(function(){
            form.ajaxSubmit({
                url:saveUrl,
                type:"POST",
                dataType:"json",
                cache:false,
                success:function(ret){
                    if(ret.state == "ok"){
                        if(_callback && typeof(_callback)=='function'){
                            result = _callback(ret);
                            if(typeof(result) == 'undefined' || result != false){
                                modal.modal('hide');
                            }
                        }
                    }else{
                        alert(ret.msg);
                    }
                }
            });
        });

        return {
            show: function (entity, options) {
                if(options.title){
                    modal.find(".modal-title").html(options.title);
                }
                if(options && options.callback){
                    _callback = options.callback;
                }
                _FormKit_.bindData(form,entity,"entity",options.readOnly);
                modal.modal('show');
            }
        }

    }();
</script>
<script>
    <!-- 页面js,请自行将js内容导出到js文件中 -->
    $(document).ready(function () {

        var _listUrl = _CTX_ + _PATH_ + '/list';
        var _deleteUrl = _CTX_ + _PATH_ + '/deleteCascade';
        var _batchDeteleUrl = _CTX_ + _PATH_ + '/batchDelete';

        var _bottomHeight = 103;
        var _tableMinHeight = 450;
        var _maxHeight = $container().height();
        var _tableHeight = _maxHeight - $('#table1').position().top - _bottomHeight;
        _tableHeight = _tableHeight < _tableMinHeight ? _tableMinHeight : _tableHeight;

        function getNextSerialNumber(table) {
            var $table = (table instanceof jQuery) ? table : $(table);
            var data = $table.bootstrapTable('getData');
            var max = 0;
            if (data) {
                for (var i in data) {
                    if (data[i].serial > max) {
                        max = data[i].serial;
                    }
                }
            }
            return max + 1;
        }

        $('#table1').bootstrapTable({
            url: _listUrl,
            method: 'get',
            queryParams: function () {
                return {'parent': '#'}
            },
            height: _tableHeight,
            pagination: true,
            pageNumber: 1,
            pageSize: 20,
            pageList: [20, 50, 100],
            clickToSelect: true,
            search: true,
            searchOnEnterKey: true,
            showRefresh: true,
            toolbar: '#toolbar1',
            columns: [{
                radio: true
            }, {
                field: 'uuid',
                title: '主键',
                visible: false,
                searchable: false
            }, {
                field: 'serial',
                title: '序号',
                searchable: false
            }, {
                field: 'label',
                title: '标签'
            }, {
                field: 'code',
                title: '编码'
            }, {
                field: 'parent',
                title: '父id',
                visible: false,
                searchable: false
            }]
        })

        $('#table1').on('check.bs.table', function (event, row) {
            $('#s_parent').val(row.uuid);
            $('#subTitle').html('"'+ row.label +'"的数据项');
            $('#table2').bootstrapTable('refresh');
        });

        $('#btnAdd1').click(function () {
            var nextSerialNumber = getNextSerialNumber('#table1');
            dictDialog.show({
                "serial": nextSerialNumber
            }, {
                "title": "新增字典分类",
                "callback": function () {
                    $('#table1').bootstrapTable("refresh");
                    $('#s_parent').val("_");
                    $('#subTitle').html("字典数据项");
                    $('#table2').bootstrapTable('refresh');
                }
            });
        });

        $('#btnEdit1').click(function () {
            var selections = $('#table1').bootstrapTable('getSelections');
            if (selections && selections.length == 1) {
                dictDialog.show(selections[0], {
                    "title": "编辑字典分类",
                    "callback": function () {
                        $('#table1').bootstrapTable("refresh");
                        $('#s_parent').val("_");
                        $('#subTitle').html("字典数据项");
                        $('#table2').bootstrapTable('refresh');
                    }
                });
            } else {
                alert("只能选择一个");
            }
        });

        $('#btnDelete1').click(function () {
            var selections = $('#table1').bootstrapTable('getSelections');
            if (selections) {
                $.ajax({
                    url: _deleteUrl,
                    type: 'POST',
                    data: {"uuid": selections[0].uuid},
                    cache: false,
                    dataType: 'json',
                    success: function (ret) {
                        if (ret.state == 'ok') {
                            $('#table1').bootstrapTable("refresh");
                            $('#s_parent').val("_");
                            $('#subTitle').html("字典数据项");
                            $('#table2').bootstrapTable('refresh');
                            alert("删除成功");
                        } else {
                            alert(ret.msg);
                        }
                    }
                });
            }
        });

        $('#table2').bootstrapTable({
            url: _listUrl,
            method: 'get',
            queryParams: function () {
                return {'parent': $('#s_parent').val()}
            },
            height: _tableHeight,
            pagination: true,
            pageNumber: 1,
            pageSize: 20,
            pageList: [20, 50, 100],
            clickToSelect: true,
            search: true,
            searchOnEnterKey: true,
            showRefresh: true,
            toolbar: '#toolbar2',
            columns: [{
                checkbox: true
            }, {
                field: 'uuid',
                title: '主键',
                visible: false,
                searchable: false
            }, {
                field: 'serial',
                title: '序号',
                searchable: false
            }, {
                field: 'label',
                title: '标签'
            }, {
                field: 'code',
                title: '编码'
            }, {
                field: 'parent',
                title: '父id',
                visible: false,
                searchable: false
            }]
        });

        $('#btnAdd2').click(function () {
            var parent = $('#s_parent').val();
            var nextSerialNumber = getNextSerialNumber('#table2');
            if (parent) {
                dictDialog.show({
                    "parent": parent,
                    "serial": nextSerialNumber
                }, {
                    "title": "新增字典项",
                    "callback": function () {
                        $('#table2').bootstrapTable("refresh");
                    }
                });
            } else {
                alert("请选择一个字典分类");
            }
        });

        $('#btnEdit2').click(function () {
            var selections = $('#table2').bootstrapTable('getSelections');
            if (selections && selections.length == 1) {
                dictDialog.show(selections[0], {
                    "title": "编辑字典分类",
                    "callback": function () {
                        $('#table2').bootstrapTable("refresh");
                    }
                });
            } else {
                alert("只能选择一个");
            }
        });

        $('#btnDelete2').click(function () {
            var selections = $('#table2').bootstrapTable('getSelections');
            if (selections) {
                var uuids = [];
                for (var i in selections) {
                    uuids.push(selections[i].uuid);
                }
                $.ajax({
                    url: _batchDeteleUrl,
                    type: 'POST',
                    data: $.param({"uuids": uuids}, true),
                    cache: false,
                    dataType: 'json',
                    success: function (ret) {
                        if (ret.state == 'ok') {
                            alert("删除成功");
                            $('#table2').bootstrapTable('refresh');
                        } else {
                            alert(ret.msg);
                        }
                    }
                });
            }
        });

        $(window).bind('resize', function () {
            var _maxHeight = $container().height();
            var _tableHeight = _maxHeight - $('#table1').position().top - _bottomHeight;
            _tableHeight = _tableHeight < _tableMinHeight ? _tableMinHeight : _tableHeight;

            $('#table1').bootstrapTable("resetView", {height: _tableHeight});
            $('#table2').bootstrapTable("resetView", {height: _tableHeight});
        });


    })
</script>
#end

#define content()
<div class="row">
    <div class="col-md-6 col-lg-6">
        <div class="ibox float-e-margins nomargin">
            <div class="ibox-title">
                <h2>字典分类</h2>
            </div>
            <div class="ibox-content">
                <div class="row row-lg">
                    <div class="col-sm-12">
                        <!-- Example Rowstyle -->
                        <div class="example-wrap margin-sm-0">
                            <div class="example">
                                <div id="toolbar1" class="btn-group">
                                    <button id="btnAdd1" type="button" class="btn btn-primary">
                                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                                    </button>
                                    <button id="btnEdit1" type="button" class="btn btn-primary">
                                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                                    </button>
                                    <button id="btnDelete1" type="button" class="btn btn-primary">
                                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                                    </button>
                                </div>
                                <table id="table1">
                                </table>
                            </div>
                        </div>
                        <!-- End Example Rowstyle -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-lg-6">
        <!-- Panel Style -->
        <div class="ibox float-e-margins nomargin">
            <div class="ibox-title">
                <h2 id="subTitle">字典数据项</h2>
            </div>
            <div class="ibox-content">
                <div class="row row-lg">
                    <div class="col-sm-12">
                        <!-- Example Rowstyle -->
                        <div class="example-wrap margin-sm-0">
                            <div class="example">
                                <input type="hidden" id="s_parent" value="_"/>
                                <div id="toolbar2" class="btn-group">
                                    <button id="btnAdd2" type="button" class="btn btn-primary">
                                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                                    </button>
                                    <button id="btnEdit2" type="button" class="btn btn-primary">
                                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                                    </button>
                                    <button id="btnDelete2" type="button" class="btn btn-primary">
                                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                                    </button>
                                </div>
                                <table id="table2">
                                </table>
                            </div>
                        </div>
                        <!-- End Example Rowstyle -->
                    </div>
                </div>
            </div>
        </div>
        <!-- End Panel Style -->
    </div>
</div>

<!-- 编辑新增对话框,如有需要请导出到对应的对话框文件中 -->
<div id="dictDialog" class="modal inmodal fade" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title">编辑字典</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <form class="form-horizontal" role="form">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">标签：</label>
                                <div class="col-sm-10">
                                    <input type="text" data-bind class="form-control" id="label" name="entity.label"
                                           placeholder="请输入标签">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">代码：</label>
                                <div class="col-sm-10">
                                    <input type="text" data-bind class="form-control" id="code" name="entity.code"
                                           placeholder="请输入代码">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">序号：</label>
                                <div class="col-sm-10">
                                    <input type="text" data-bind class="form-control" id="serial" name="entity.serial"
                                           placeholder="请输入代码">
                                </div>
                            </div>
                        </div>
                        <input type="hidden" data-bind id="uuid" name="entity.uuid"/>
                        <input type="hidden" data-bind id="parent" name="entity.parent"/>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button id="btnSave" type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
#end